<!--
 * @Author: username 1718324422@qq.com
 * @Date: 2022-11-29 09:03:38
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2023-06-04 14:29:29
 * @FilePath: \xu_vue\src\view\anmation\anmation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <input type="text" v-model="addValue" />
    <el-button @click="addchildvalue">添加</el-button>
    <div id="parent">
      <li class="li1" @click="isshow">我是一个li</li>
      <p >我是一个p{{ dss }}</p>
      <Com :value="value" @updata="updata"/>
    </div>
  </div>
</template>

<script>
import Com from '@/components/com.vue'
export default {
  data() {
    return {
      addValue: "",
      value:'3412313',
      isSuccess:true,
      dss:''
    };
  },
  components:{Com},
  mounted(){
   this.yibu()
  },
  methods: {
    isshow(){
      this.isSuccess = !this.isSuccess
      this.yibu()
    },
    updata(data){
     this.dss =data
    },
    addchildvalue() {
      console.log(111);
      let parent = document.querySelector("#parent");
      // 创建节点
      let diva = document.createElement("div");
      // 内容
      diva.innerHTML = this.addValue || 'dsjakdasj';
      // 将创建的节点插入 最后添加
      // parent.append(diva);
      // 将创建的节点插入 最前添加
      parent.prepend(diva);
      this.addValue = "";
    },
    yibu(){
        const promise = new Promise((reject,reslove)=>{
          if(this.isSuccess){
            reslove('成功')
          }else{
            reject('失败')
          }
        })
        promise.then(res=>{
          console.log(`他${res}了`);
        })
        .catch(err=>{
          console.log(`他${err}了`);
        })
        .finally(()=>{
          console.log('结束了');
        })
    }
  }
};
</script>

<style lang="scss" scoped>
#parent {
  width: 300px;
  height: 300px;
  margin: 200px auto;
  background-color: #b2b98f;
}
</style>